<template>
    <div id="users" v-loading="loading">
        <el-alert id="header"
                title="用户列表"
                type="success"
                description="不积跬步,无以至千里;不积小流,无以成江海">
        </el-alert>
        <div class="title">
            <div class="container_table">
                <el-table
                        :data="tableData.slice((currentPage-1)* pageSize,currentPage*pageSize)"
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            label="序号"
                            width="55"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="email"
                            label="账号"
                            width="180"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="department"
                            label="部门"
                            width="180"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="group"
                            label="小组"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="danger" @click="delUser(scope.$index,scope.row)" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        class="fy"
                        background
                        layout="prev, pager, next"
                        @current-change="current_change"
                        :total="total"
                        v-show="page"
                        :pageSize.sync="pageSize"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                total:0,//默认数据总数
                pageSize:10,//每页的数据条数
                currentPage:1,//默认开始页面
                page:false,
                tableData: [],
                loading: false
            };
        },
        methods: {
            delUser(index,row) {
                let conf = this.$layer.confirm('确定删除用户？', {
                    btn: ['确定','取消'], //按钮
                    title:'提示'
                }, () => {
                    this.$layer.close(conf);
                    this.loading = true;
                    axios.delete('/api/api/delUser',{params: {uid:row.id}})
                        .then(res => {
                            if (res.data.status === 200) {
                                this.tableData.splice(index, 1);
                                this.$message.success('删除成功');
                            } else {
                                this.$message.error(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err => {
                            this.loading = false;
                            this.$message.error('服务器异常');
                        })
                });
            },
            current_change:function(currentPage){
                this.currentPage = currentPage;
            },
            getTotal () {
                this.total = this.tableData.length;
            },
            getList () {
                    axios.get('/api/api/getUserList')
                    .then(res => {
                        let len = res.data.data.length;
                        if (res.data.status === 200) {
                            this.tableData = res.data.data
                        } else {
                            this.$router.push('/login')
                        }
                        if (len > this.pageSize) {
                            this.page = true;
                        }
                        this.getTotal();
                    })
                    .catch(err => {
                        this.$message.error('服务器异常');
                    })
            }
        },
        mounted () {
            this.getList();
        },

    }
</script>

<style scoped>
    .fy{
        text-align:center;
        margin-top:30px;
    }
    .title{
        height:100%;
    }
</style>